<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="帮助中心"
            :hasBack="false"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <!-- 帮助中心列表组件 -->
            <table
                class="help-list"
                v-for="(item,index) of helpList"
                :key="index"
            >
                <tr>
                    <td
                        class="no-border-left no-border-top no-border-bottom"
                        rowspan="2"
                        width="20%"
                    >
                        <img
                            class="help-list-icon"
                            :src="item.helpListIcon"
                        />
                        <div class="help-list-name">{{item.helpListName}}</div>
                        <div
                            class="help-list-more"
                            @click="goList(item.helpListId)"
                        >更多</div>
                    </td>
                    <td
                        class="help-item no-border-top"
                        width="40%"
                        @click="goDetail(item.itemList[0].itemId)"
                    >{{item.itemList[0].itemName}}</td>
                    <td
                        class="help-item no-border-top no-border-right"
                        width="40%"
                        @click="goDetail(item.itemList[0].itemId)"
                    >{{item.itemList[1].itemName}}</td>
                </tr>
                <tr>
                    <td
                        class="help-item no-border-bottom"
                        @click="goDetail(item.itemList[0].itemId)"
                    >{{item.itemList[2].itemName}}</td>
                    <td
                        class="help-item no-border-bottom no-border-right"
                        @click="goDetail(item.itemList[0].itemId)"
                    >{{item.itemList[3].itemName}}</td>
                </tr>
            </table>
            <!-- 帮助中心列表组件 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <!-- 共用底部导航栏 -->
        <common-footer nowPage="1"></common-footer>
        <!-- 共用底部导航栏 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonFooter from '@/components/Footer'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'HelpCenter',
    components: {
        CommonHeader,
        CommonScroll,
        CommonFooter
    },
    data () {
        return {
            scrollStyle: {
                top: "1.11rem",
                left: "0",
                right: "0",
                bottom: "1.17rem",
            },
            helpList: [
                {
                    helpListId: '1',
                    helpListIcon: require('@/assets/images/helpCenter/help-1.png'),
                    helpListName: '平台介绍',
                    itemList: [
                        {
                            itemName: '百领好货是什么？',
                            itemId: '1-1'
                        },
                        {
                            itemName: '百领好货的玩法？',
                            itemId: '1-2'
                        },
                        {
                            itemName: '百领好货的优势？',
                            itemId: '1-3'
                        },
                        {
                            itemName: '如何联系客服？',
                            itemId: '1-4'
                        }
                    ]
                },
                {
                    helpListId: '2',
                    helpListIcon: require('@/assets/images/helpCenter/help-2.png'),
                    helpListName: '售后问题',
                    itemList: [
                        {
                            itemName: '百领好货是什么？百领好货是什么？',
                            itemId: '2-1'
                        },
                        {
                            itemName: '百领好货的玩法？',
                            itemId: '2-2'
                        },
                        {
                            itemName: '百领好货的优势？',
                            itemId: '2-3'
                        },
                        {
                            itemName: '如何联系客服？',
                            itemId: '2-4'
                        }
                    ]
                },
                {
                    helpListId: '3',
                    helpListIcon: require('@/assets/images/helpCenter/help-3.png'),
                    helpListName: '购物指南',
                    itemList: [
                        {
                            itemName: '百领好货是什么？百领好货是什么？',
                            itemId: '3-1'
                        },
                        {
                            itemName: '百领好货的玩法？',
                            itemId: '3-2'
                        },
                        {
                            itemName: '百领好货的优势？',
                            itemId: '3-3'
                        },
                        {
                            itemName: '如何联系客服？',
                            itemId: '3-4'
                        }
                    ]
                },
                {
                    helpListId: '4',
                    helpListIcon: require('@/assets/images/helpCenter/help-4.png'),
                    helpListName: '发货物流',
                    itemList: [
                        {
                            itemName: '百领好货是什么？百领好货是什么？',
                            itemId: '4-1'
                        },
                        {
                            itemName: '百领好货的玩法？',
                            itemId: '4-2'
                        },
                        {
                            itemName: '百领好货的优势？',
                            itemId: '4-3'
                        },
                        {
                            itemName: '如何联系客服？',
                            itemId: '4-4'
                        }
                    ]
                },
                {
                    helpListId: '5',
                    helpListIcon: require('@/assets/images/helpCenter/help-5.png'),
                    helpListName: '业务经营',
                    itemList: [
                        {
                            itemName: '百领好货是什么？百领好货是什么？',
                            itemId: '5-1'
                        },
                        {
                            itemName: '百领好货的玩法？',
                            itemId: '5-2'
                        },
                        {
                            itemName: '百领好货的优势？',
                            itemId: '5-3'
                        },
                        {
                            itemName: '如何联系客服？',
                            itemId: '5-4'
                        }
                    ]
                }
            ]
        }
    },
    methods: {
        goList (id) {
            this.$router.push(
                {
                    path: '/helpCenter/list',
                    query: { helpListId: id }
                }
            )
        },
        goDetail (id) {
            this.$router.push(
                {
                    path: '/helpCenter/detail',
                    query: { itemId: id }
                }
            )
        }
    }
}
</script>

<style lang="stylus" scoped>
.help-list
    table-layout fixed
    width 100%
    background #fff
    margin-bottom 0.18rem
    .help-item
        font-size 0.33rem
        color #666
    .no-border-left
        border-left none
    .no-border-right
        border-right none
    .no-border-top
        border-top none
    .no-border-bpttom
        border-bpttom none
.help-list>tr>td
    text-align center
    height 1.33rem
    padding 0 0.18rem
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
    border 1px solid #e5e5e5
    .help-list-icon
        width 0.79rem
        height 0.79rem
    .help-list-name
        font-size 0.33rem
        color #333
        margin-top 0.18rem
    .help-list-more
        display inline-block
        font-size 0.29rem
        color #999
        padding-right 0.25rem
        margin-top 0.18rem
        background-image url('../../assets/images/helpCenter/more.png')
        background-repeat no-repeat
        background-size 0.14rem 0.25rem
        background-position right
</style>
